
<template>
  <div class="t4_content" style="background: #f7f8fa">
    <div class="t4_banner">
      <div class="t4_w">
        <div class="t4_bannerBOX">
          <el-input
            v-model="searchInfo"
            type="text"
            name="keywords"
            id="keywords"
            placeholder="请输入资源名称"
            clearable
            @keyup.enter.native="clearText"
          >
            <el-button @click="clearText" slot="append" icon="el-icon-search"
              >搜索</el-button
            >
          </el-input>
          <ul class="list_Ul">
            <li v-for="(item, index) in hotWordList" :key="index">
              <a @click="hotClick(item)">{{ item }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="t4_w" style="position: relative">
      <!-- 面包屑 -->
      <div class="t4_local">
        <span class="local-tag"
          ><img src="@/assets/images/sub_ts.png" alt=""
        /></span>
        <a href="/">首页</a> &gt;<span style="color: #666666">资源统计</span>
        &gt;
        <span style="color: #666666">{{ listName }}</span>
      </div>
      <!-- 内容 -->
      <div class="hotspotDataBox">
        <div class="hotspotData_left">
          <div class="hotspotData_item">
            <img src="../../assets/images/zn_icon.png" alt="" />
            <span>热点数据</span>
          </div>
          <div
            class="hotspotData_items"
            v-for="(item, index) in tabs"
            :key="index"
            @click="add(item, index)"
            :tabs="tabs.name"
            :style="{
              backgroundColor: currentIndex === index ? '#215583' : '#072947',
            }"
          >
            {{ item.name }}
          </div>
        </div>

        <div
          class="hotspotData_rigth"
          v-for="(tab, index) in tabs"
          :key="index"
          v-if="activeTabIndex === index"
        >
          <div class="lists-box" v-if="activeTabIndex === 0">
            <div class="title-box">
              <div class="title_boxleft">
                <div>
                  <img src="../../assets/images/hotData_hot.png" alt="" />
                  <span>最新数据集</span>
                </div>

                <div class="dian">
                  <div class="lis"></div>
                  <div class="lis"></div>
                  <div class="lis"></div>
                </div>
              </div>
            </div>
            <div
              class="list_item"
              v-for="(item, index) in znewList"
              :key="index"
              @click="listItemClick(item)"
            >
              <div class="time">[{{ item.createTime }}]</div>
              <span class="hover-name">{{ item.name }}</span>
              <span class="hover-color" style="color: #c8c8c8">{{
                item.type
              }}</span>
            </div>
          </div>

          <div class="lists-box" v-if="activeTabIndex === 1">
            <div class="title-box">
              <div class="title_boxleft">
                <div>
                  <img src="../../assets/images/hotData_hot.png" alt="" />
                  <span>热门数据集</span>
                </div>

                <div class="dian">
                  <div class="lis"></div>
                  <div class="lis"></div>
                  <div class="lis"></div>
                </div>
              </div>
            </div>
            <div
              class="list_item"
              v-for="(item, index) in remenList"
              :key="index"
              @click="listItemClick(item)"
            >
              <div class="time">调用次数{{ item.sqcs }}</div>
              <span class="hover-name">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {dataSjbmZrsj, getAllfiles, getIndex, topFive} from "../../utils/httpUtils";
export default {
  data() {
    return {
      znewList: [],
      remenList: [],
      currentIndex: 0,
      searchInfo: "",
      hotWordList: [],
      tabs: [
        { name: "最新数据", index: 0, content: "" },
        { name: "热门数据", index: 1, content: "" },
      ],
      listName: "热点数据",
      activeTabIndex: 0,
      newestList: [],
      hotList: [],
      // 数据资源总数
      dataNum: 0,
      // 服务资源总数
      serveNum: 0,
      // 共享机构
      institution: 0,
      // 交换数据
      exchangeNum: 0,
    };
  },
  mounted() {
    this.getlist()
  },
  methods: {
    getlist(){
      // 最新数据
      getAllfiles().then((res) => {
        console.log(res, "最新数据123");
        this.znewList = res;
      })
      // 热门数据
      dataSjbmZrsj().then((res) => {
        console.log(res, "热门数据123");
        this.remenList = res;
      });
    },
    clearText(event) {
      event.stopPropagation();
      this.searchInfo = "";
    },
    // 列表数据点击
    listItemClick(val) {
      this.$router.push({
        path: "/seekResult",
        query: { searchVal: val.name },
      });
    },
    search() {
      this.$router.push({
        path: "/seekResult",
        query: { searchVal: this.searchInfo },
      });
    },
    add(item, index) {
      this.currentIndex = index;
      this.listName = item.name;
      this.activeTabIndex = item.index;
    },
    hotClick(val) {
      this.searchInfo = val;
      this.$router.push({
        path: "/seekResult",
        query: { searchVal: val },
      });
    },
  },
};
</script>

<style scoped type="text/less">
.hotspotDataBox {
  padding-bottom: 25px;
  display: flex;
  justify-content: space-between;
  min-height: 800px;
  .hotspotData_left {
    width: 12%;
    height: 400px;
    background-color: #072947;
    .hotspotData_item {
      height: 65px;
      line-height: 65px;
      background: #198ef8;
      text-align: center;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      line-height: 65px;
    }
    .hotspotData_items {
      height: 57px;
      line-height: 57px;
      text-align: center;
      font-size: 15px;
      border-bottom: 1px #39546c solid;
      color: white;
      cursor: pointer;
    }
  }
  .hotspotData_rigth {
    width: 86%;
    padding: 24px;
    background-color: #fff;
    border: 1px #edeef0 solid;
    height: 560px;
    .lists-box {
      height: 400px;
      overflow: auto;
      width: 100%;
      background: #fff;
      padding: 0 12px 20px 12px;
      margin-right: 17px;
      .title-box {
        .title_boxleft {
          display: flex;
          justify-content: space-between;
          height: 52px;
          line-height: 52px;
          font-size: 18px;
          font-weight: bold;
          color: #333333;
          .dian {
            cursor: pointer;
            .lis {
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: #b6b6b6;
              display: inline-block;
            }
          }
        }
      }
      .list_item {
        height: 35px;
        line-height: 35px;
        width: 100%;
        /* background: red; */
        overflow: hidden;
        border-bottom: 1px dashed #d6d6d6;
        cursor: pointer;
        display: flex;
        /* justify-content: space-between; */
        font-size: 14px;
      }
      .list_item .time {
        color: #78aced;
        width: 300px;
      }
      .list_item .hover-name {
        width: 550px;
      }
      .list_item:hover {
        color: #428bca;
      }
    }
  }
}
.t4_banner {
  position: relative;
  .t4_bannerBOX {
    width: 90%;
    margin: 0 auto;
    .list_Ul {
      cursor: pointer;
      display: flex;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 40px;
      height: 10px;
      font-size: 14px;
      li {
        margin-left: 10px;
        color: #5f5f5f;
      }
      a:hover {
        background: rgba(255, 255, 255, 0.1);
      }
    }
  }
}

/deep/ .t4_banner .el-input-group--append .el-input__inner {
  height: 50px;
  line-height: 50px;
  background: #fff;
  border: 1px solid #fff;
  color: rgb(99, 99, 99);
  text-indent: 15px;
}
/deep/ .t4_banner .el-input-group__append {
  background-color: #198ef8;
  color: #fff;
  border: none;
}
</style>


